/* Geral */
.ink-gallery {
	max-width:600px;
	width:100%;
	position:relative;
}

.ink-gallery .thumbs {
	overflow: hidden;
}

.ink-gallery .thumbs > ul {
	#ink > #effects > .transition ("margin-left", 250ms);
}

.ink-gallery .pagination {
	width:100%;
	text-align:center;
	position:absolute; bottom:0;
	z-index:10;
}

.ink-gallery .pagination a {
	height:16px;
	width:16px;
	border-radius:8px;
	margin:10px 3px;
	display:inline-block;
	vertical-align:middle;
	background:rgba(255,255,255,0.4);
}

.ink-gallery .pagination a:hover,
.ink-gallery .pagination a.active {
	background:rgba(255,255,255,0.9);
}

.ink-gallery .slider {
	width:100%;
	height:100%;
	overflow:hidden
}

.ink-gallery .slider li {
	display:inline-block;
}

.ink-gallery .slider > ul {
	white-space:nowrap;
	font-size:0;
	#ink > #effects > .transition ("margin-left", 250ms);
}

/* Typography */
.ink-gallery .article_text.example1 {
	background:rgba(0,0,0,0.6);
	position:absolute;
	top:0; right:0; bottom:0; left:66%;
	padding:1em;
}

.ink-gallery .article_text.example2 {
	background:rgba(0,0,0,0.6);
	position:absolute;
	left:0; right:0; bottom:0;
	padding:0.5em;
}

.ink-gallery .article_text h1 {
	color:@white;
	margin-bottom:0.5em;
	font-weight:normal;
	font-size:2em
}

.ink-gallery .article_text p {
	color:@white;
	font-size:0.875em;
	line-height:1.5em;
	margin:0
}

/* Gallery -  Thumbs bottom */
.ink-gallery .stage {
	height:400px;
	position:relative;
}

.ink-gallery nav li {
	margin:0
}

.ink-gallery nav a.next,
.ink-gallery nav a.previous {
	display:block;
	height:100%;
	width:50%;
	position:absolute;
	z-index:9
}

.ink-gallery nav a.next {
	right:0
}

.ink-gallery nav a.previous {
	left:0
}

.ink-gallery nav a.next:after,
.ink-gallery nav a.previous:after {
	content:"";
	position: absolute; top:46%;
	border-top: 32px solid rgba(255, 255, 255, 0);
	border-bottom: 32px solid rgba(255, 255, 255, 0);
}
.ink-gallery nav a.next:after {
	right:-14px;
	border-left: 24px solid rgba(0,0,0,0.6);
}

.ink-gallery nav a.previous:after {
	left:-14px;
	border-right: 24px solid rgba(0,0,0,0.6);
}

.ink-gallery .thumbs {
	position:relative
}

.ink-gallery .thumbs ul {
	white-space:nowrap;
	overflow:hidden;
}

.ink-gallery .thumbs li {
	width:96px;
	display:inline-block;
	margin:10px 0 10px 10px;
	vertical-align:top;
	font-size:0.75em;
	line-height:1.5em;
}

.ink-gallery .thumbs li:first-child {
	margin-left:0
}

.ink-gallery .thumbs li a {
	display:block;
	text-decoration:none;
	color:#0069D6
}

.ink-gallery .thumbs li a:hover {
	text-decoration:underline
}

.ink-gallery .thumbs li span {
	white-space:pre-wrap;
	display:block;
}

.ink-gallery .thumbs .pagination {
	position:relative;
	background:rgba(0,0,0,0.2)
}

.ink-gallery .thumbs .pagination a {
	height:12px;
	width:12px;
	border-radius:6px;
	margin:10px 3px;
}

.ink-gallery .thumbs a.next,
.ink-gallery .thumbs a.previous {
	content:"";
	height:0;
	width:0;
	position:relative;
	background:transparent;
	border-radius:0;
	border-top: 12px solid rgba(255, 255, 255, 0);
	border-bottom: 12px solid rgba(255, 255, 255, 0);
}

.ink-gallery .thumbs a.next{
	margin-left:6px;
	border-left: 10px solid rgba(255, 255, 255, 0.4);
}

.ink-gallery .thumbs a.previous {
	margin-right:6px;
	border-right: 10px solid rgba(255, 255, 255, 0.4);
}

.ink-gallery .thumbs a.next:hover {
	border-left: 10px solid rgba(255, 255, 255, 0.9);
}
.ink-gallery .thumbs a.previous:hover {
	border-right: 10px solid rgba(255, 255, 255, 0.9);
}

/* Gallery - Thumbs right */
.ink-gallery.rightNav .stage {
	width:400px;
	float:left;
}

.ink-gallery.rightNav .thumbs {
	height:400px;
	overflow:hidden;
}

.ink-gallery.rightNav .thumbs img {
	float:left;
	margin-right:10px;
}

.ink-gallery.rightNav .thumbs li {
	width:290px;
	margin:0 0 10px 10px;
	clear:both;
	display:block;
	overflow:hidden
}

/* Modal box */
.ink-modal {
	height:400px;
	width:600px;
	background:@white;
	z-index:9999;
	position:relative;
	box-shadow:0px 0px 20px rgba(0, 0, 0, 0.4)
}

.ink-modal a.ink-close {
	height:26px;
	width:28px;
	border-radius:14px;
	position:absolute; top:-10px; right:-10px;
	background:rgba(0,0,0,0.7);
	padding-top:2px;
	text-decoration:none;
	text-align:center;
	font-family:Tahoma, Geneva, sans-serif;
	font-weight:bold;
	color:@white;
	z-index:1;
}

/* Tabs */


/* Sortable list */
.ink-sortable-list {}

.ink-sortable-list li {
	margin: 0;
	border-bottom: 1px solid #CCC;
	line-height: @sortable-list-height;
	cursor:move;
}

.ink-sortable-list li:first-child {
	border-top: 1px solid #CCC;
}

.ink-sortable-list li:hover {
	background: rgba(204, 204, 204, 0.2)
}

.ink-sortable-list li.drag {
	#ink > #shadows > .box-shadow (0, 0px, 10px, 0, rgba( 0, 0, 0, 0.3));
}

.ink-sortable-list .ink-label {
	margin:0 .8em;
}

/* Tree view */
ul.ink-tree-view,
ul.ink-tree-view ul {
	list-style-type:none
}

.ink-tree-view button {
	border:none;
	background:none;
	margin-left:-1.4em;
}

/* Date picker */
.sapo_component_datepicker {
	#ink > #border-radius > .all (@border-radius);
	text-align: center;
	padding:5px;
	font-size: @datepicker-fontSize;
	#ink > #shadows > .box-shadow (0px, 1px, 2px, 0, rgba(0,0,0,0.4));
	background: @datepicker-bgColor;
    position:absolute;
	display: none;
	z-index:1
}

.sapo_component_datepicker a {text-decoration: none;}
.sapo_component_datepicker li {list-style: none inside}

.sapo_cal_top_options {
	padding:5px; 
	font-size: .813em;
	cursor:pointer;
}

.sapo_cal_top_options .clean {
	float:left;
}

.sapo_cal_top_options .ink-close {
	float:right;
}
	
.sapo_cal_top {
	line-height: 2em;
	background: @datepicker-header-bg;
	#ink > #border-radius > .all (@border-radius);
}	

.sapo_cal_top div {
	float:left;
}

.sapo_cal_top .sapo_cal_prev,
.sapo_cal_top .sapo_cal_next {
	width: 10%
}

.sapo_cal_top .sapo_cal_month_desc {
	width: 80%
}

.sapo_cal_month,
.sapo_cal_year_selector,
.sapo_cal_month_selector {
	margin-top: .5em;
	padding-left:0
}

.sapo_cal_month ul,
.sapo_cal_year_selector ul,
.sapo_cal_month_selector ul {
	clear:both; 
	padding-left:0
}

.sapo_cal_month li,
.sapo_cal_year_selector ul li,
.sapo_cal_month_selector ul li {
	width: 2.4em; 
	float:left; 
	text-align: center;
	padding:0;
	margin:0
}

.sapo_cal_year_selector ul li {width:4em}
.sapo_cal_month_selector ul li {width:3.4em}

.sapo_cal_month li a,
.sapo_cal_year_selector li a,
.sapo_cal_month_selector li a {
	margin:0px;
	line-height: 2em;
	vertical-align: middle;
	display: block;
	#ink > #border-radius > .all (@border-radius);
}

.sapo_cal_month .sapo_cal_header {
	border-bottom: 1px solid rgba(0,0,0,.1); 
	padding-bottom: .5em;
	margin-bottom: .5em;
	color: #aaa;
}

.sapo_cal_month li a:hover,
.sapo_cal_year_selector li a:hover,
.sapo_cal_month_selector li a:hover {
	background: @datepicker-cellHover
}

.sapo_cal_month li a,
.sapo_cal_year_selector li a,
.sapo_cal_month_selector li a {
	color: @datepicker-cell-color;
}

.sapo_cal_top:after,
.sapo_cal_middle:after,
.sapo_cal_top_options:after,
.sapo_component_datepicker:after ,
.sapo_cal_month .sapo_cal_header:after,
.sapo_cal_month .sapo_cal_middle ul:after, {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
	zoom: 1;
}

.sapo_cal_month li a.sapo_cal_on, 
.sapo_cal_month li a.sapo_cal_on:hover,
.sapo_cal_year_selector li a.sapo_cal_on, 
.sapo_cal_year_selector li a.sapo_cal_on:hover,
.sapo_cal_month_selector li a.sapo_cal_on, 
.sapo_cal_month_selector li a.sapo_cal_on:hover {
	background: @datepicker-active-bg;
	color: @datepicker-active-color;
}

.sapo_cal_year_selector,
.sapo_cal_month_selector {display: none}

/* Progess bars */
.ink-progress-bar {
	height: @progress-bar-height;
	margin-bottom: 20px;
	overflow: hidden;
	background: @progress-bar-bg;
	#ink > #border-radius > .all (@border-radius);	
	#ink > #shadows > .box-shadow (inset, 0, 1px, 2px, rgba( 0, 0, 0, 0.1));
	
	.bar {
		float: left;
		width: 0;
		height: 100%;
		line-height: @progress-bar-height;
		font-size: @progress-bar-fontSize;
		color: @progress-bar-color;
		text-align: center;
		#ink > #shadows > .text-shadow (0, -1px, 0, rgba(0, 0, 0, 0.25));
		#ink > #shadows > .box-shadow (inset, 0, -1px, 0, 0, rgba(0, 0, 0, 0.15));
		.box-sizing(border-box);
		#ink > #effects > .transition ("width", 0.6s, "ease");
		
		&.grey {
			#ink > #gradients > .gradient (@grey-10, @grey-20, 150%);
			color: @black;
			#ink > #shadows > .text-shadow (0, 1px, 0, rgba(255, 255, 255, 0.25));
		}
		
		&.green {
			#ink > #gradients > .gradient (desaturate(@success-bg,10%), darken(desaturate(@success-bg,10%),10%), 150%);	
		}
		
		&.blue {
			#ink > #gradients > .gradient (desaturate(@info-bg,10%), darken(desaturate(@info-bg,10%),10%), 150%);
		}
		
		&.red {
			#ink > #gradients > .gradient (desaturate(@caution-bg,10%), darken(desaturate(@caution-bg,10%),10%), 150%);
		}
		
		&.orange {
			#ink > #gradients > .gradient (desaturate(@warning-bg,10%), darken(desaturate(@warning-bg,10%),10%), 150%);
		}
		
		&.black {
			#ink > #gradients > .gradient (lighten(@black,30%), @black, 150%);
		}
	}
}